<template>
    <div>
        <div v-if="buttonType === 'text'">
            <el-button icon="el-icon-edit" type="text" @click="toSelect">{{ buttonName }}</el-button>
        </div>
        <div v-else>
            <el-button class="w-100" :size="size" plain @click="toSelect">
                {{ value == null || value.name === '' ? buttonName : value.name }} <i class="el-icon-edit"></i>
            </el-button>
        </div>
        <el-dialog title="选择员工" append-to-body :visible.sync="showFlag" width="1000px">
            <div class="flex-start m-b-10">
                <!--        <filling-operation-post-type-select class="m-r-10" @change="v=>this.search.postName = v"/>-->
                <el-input size="small" style="width: 300px;" v-model="search.name" class="m-r-10" placeholder="请输入姓名"/>
                <el-button type="primary" @click="query" icon="el-icon-search" size="small">查询</el-button>
            </div>
            <div class="m-t-10 flex-start">
                <div class="left pa-12">
                    <avue-tree :option="treeOption" @node-click="deptSelect"></avue-tree>
                </div>
                <div class="f-g-1 m-l-10">
                    <el-table class="my-table" :data="data" v-loading="loading" style="width: 100%" border height="400"
                              :header-cell-style="{background:'#eee',color:'#000'}">
                        <el-table-column label="" width="40">
                            <template v-slot="scope">
                                <el-radio :label="scope.row.id" v-model="valueSelectId" class="m-l-5">{{
                                        ''
                                    }}
                                </el-radio>
                            </template>
                        </el-table-column>
                        <el-table-column type="index" align="center" label="序号" width="60"/>
                        <el-table-column prop="postName" label="岗位" min-width="100"/>
                        <el-table-column prop="name" label="员工姓名" min-width="100"/>
                        <el-table-column prop="phone" label="手机号码" min-width="100"/>
                    </el-table>
                </div>
            </div>
            <app-pagination ref="paginationRef" :total="total" class="m-t-20" @change="query"/>
            <div class="dividing-line m-b-10 m-t-10"></div>
            <div class="flex-end m-t-10">
                <el-button type="primary" plain size="small" @click="showFlag=false">取消</el-button>
                <el-button type="primary" size="small" @click="confirmAdd">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import AppPagination from "@/components/business/app-pagination";
import {getDeptLazyTree} from "@/api/system/dept";
import {getList} from "@/api/system/user";
import {equals, getRecords, getTotal, isNull, isStringEmpty, msgError} from "@/util/common-util";
import FillingOperationPostTypeSelect from "@/components/business/filling-operation-post-type-select";

export default {
    name: "select-filling-operation-user-button",
    components: {FillingOperationPostTypeSelect, AppPagination},
    props: {
        buttonName: {
            type: String,
            default: '选择人员'
        },
        buttonType: {
            type: String,
            default: 'text' // text btn
        },
        size: {
            type: String,
            default: 'small' // small large
        }
    },
    data() {
        return {
            treeOption: {
                lazy: true,
                nodeKey: 'id',
                addBtn: false,
                menu: false,
                defaultExpandAll: true,
                treeLoad: function (node, resolve) {
                    const parentId = (node.level === 0) ? 0 : node.data.id;
                    getDeptLazyTree(parentId).then(res => {
                        resolve(res.data.data.map(item => {
                            return {
                                ...item,
                                leaf: !item.hasChildren
                            }
                        }))
                    });
                },
                size: 'small',
                props: {
                    labelText: '标题',
                    label: 'title',
                    value: 'value',
                    children: 'children'
                }
            },
            showFlag: false,
            loading: false,
            search: {
                postName: '',
                name: ''
            },
            data: [],
            total: 0,
            currDeptId: '',
            valueSelectId: '',
            value: null
        }
    },
    methods: {
        init(id, phone, name) {
            this.value = {
                id,
                phone,
                name
            }
        },
        toSelect() {
            this.showFlag = true
            this.query()
        },
        deptSelect(data) {
            this.currDeptId = data.id
            this.$refs.paginationRef.reset()
            this.query()
        },
        query(_page) {
            if (isNull(_page)) {
                _page = this.$refs.paginationRef.getPage()
            }
            this.loading = true
            getList(_page.current, _page.size, this.search, this.currDeptId).then(res => {
                this.data = getRecords(res)
                this.total = getTotal(res)
                this.loading = false
            }).catch(() => {
                this.loading = false
            })
        },
        confirmAdd() {
            if (isStringEmpty(this.valueSelectId)) return msgError("请选择一个")
            let flag = true
            for (const item of this.data) {
                if (equals(item.id, this.valueSelectId)) {
                    this.value = {
                        id: item.id,
                        phone: item.phone,
                        name: item.name
                    }
                    this.$emit("select", this.value)
                    flag = false
                    this.showFlag = false
                    break
                }
            }
            if (flag) msgError("请选择一个")
        }
    }
}
</script>

<style lang="scss" scoped>

.left {
    border: 1px solid #d1dbe5;
    box-sizing: border-box;
    width: 300px;
    height: 400px;
    overflow-x: hidden;
    overflow-y: auto;
}

</style>
